import React, { PureComponent } from 'react';
import _ from 'lodash';
import { Select } from 'antd';
import { InputNumber } from 'antd';
import { connect } from 'dva';
import styles from './styles.less';
import debounce from 'lodash/debounce';
const { Option } = Select;

@connect(({ OTCOptionContractsMonitoringM }) => ({ OTCOptionContractsMonitoringM }))
export default class OTCOptionContractsMonitoringSearch extends PureComponent {
  constructor(props) {
    super(props);
    // 绑定lodash的防抖函数，避免频繁搜索的情况
    this.handDayChange = debounce(this.handDayChange, 500);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {}

  handDayChange = (e) => {
    if (e < 1) {
      return;
    }
    this.props.onChange({
      ...this.props.value,
      day: e,
    });
  };
  handIstriggerChange = (e) => {
    this.props.onChange({
      ...this.props.value,
      istrigger: e,
    });
  };

  render() {
    return (
      <div className={styles.query}>
        <div style={{ marginBottom: '20px', display: 'flex', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', marginLeft: '5px' }}>
            <span style={{ fontSize: '14px', marginRight: '5px' }}>观察剩余期限: </span>
            <InputNumber value={this.props.value.day} defaultValue={5} style={{ width: 60 }} min={1} precision={0} onChange={this.handDayChange}></InputNumber>
            <span style={{ fontSize: '14px', marginLeft: '2px' }}> 天</span>
          </div>
          <div style={{ marginLeft: '50px' }}>
            <span style={{ fontSize: '14px', marginRight: '5px' }}> 是否触发: </span>
            <Select value={this.props.value.istrigger} defaultValue='' style={{ width: 120 }} onChange={this.handIstriggerChange}>
              <Option value=' '>全部</Option>
              <Option value='1'>是</Option>
              <Option value='2'>否</Option>
            </Select>
          </div>
        </div>
      </div>
    );
  }
}
